<template>
<div class="order_page">
    <head-top head-title="二手交易" go-back='true'></head-top>
    <div class="shoplist_container">
        <div>
            <el-button type="danger" icon="el-icon-delete" circle v-if="userId==item.goodsUser" v-on:click='deletegoods'>
            </el-button>
            <div>
                {{item.createPerson}}
            </div>
            <hgroup class="shop_right">
                <header class="shop_detail_header">
                    <h4 :class="item.is_premium? 'premium': ''" class="">{{item.goodsName}}</h4>

                </header>
                <div class="goodssrc">
                    <img :src="item.goodsImage" class="shop_img" width="100%">
                </div>

                <p>{{item.goodsDescibe}}</p>
                <p class="fee">
                    ¥{{item.goodsPrice}}元
                    <span class="segmentation"></span>
                    <text class="text_create">
                        {{item.createTime}}
                    </text>
                </p>

            </hgroup>
            <el-button type="success" round v-on:click='buygoods'>购买</el-button>
            <router-link :to="{path: '/addmessage', query:{geohash, id: item.id}}">>
                <el-button type="success" round>留言</el-button>
            </router-link>
            <div v-for="message in messageList" :key="message.id">
                <h4>{{message.leaveMessage}}</h4>
                <h5 class="text_create">{{message.createPerson}} {{message.createTime}}</h5>

            </div>
        </div>

    </div>
</div>
</template>

<script>
import headTop from 'src/components/header/head'
import {
    mapState,
    mapMutations
} from 'vuex'
import {
    msiteAddress,
    shopDetails,
    foodMenu,
    getRatingList,
    ratingScores,
    ratingTags
} from 'src/service/getData'
import loading from 'src/components/common/loading'
import buyCart from 'src/components/common/buyCart'
import ratingStar from 'src/components/common/ratingStar'
import {
    loadMore,
    getImgPath
} from 'src/components/common/mixin'
import {
    imgBaseUrl
} from 'src/config/env'
import BScroll from 'better-scroll'

export default {
    data() {
        return {
            geohash: '', //geohash位置信息
            shopId: null, //商店id值
            showLoading: true, //显示加载动画
            changeShowType: 'food', //切换显示商品或者评价
            shopDetailData: null, //商铺详情
            showActivities: false, //是否显示活动详情
            menuList: [], //食品列表
            menuIndex: 0, //已选菜单索引值，默认为0
            menuIndexChange: true, //解决选中index时，scroll监听事件重复判断设置index的bug
            shopListTop: [], //商品列表的高度集合
            TitleDetailIndex: null, //点击展示列表头部详情
            categoryNum: [], //商品类型右上角已加入购物车的数量
            totalPrice: 0, //总共价格
            cartFoodList: [], //购物车商品列表
            showCartList: false, //显示购物车列表
            receiveInCart: false, //购物车组件下落的圆点是否到达目标位置
            ratingList: null, //评价列表
            ratingOffset: 0, //评价获取数据offset值
            ratingScoresData: null, //评价总体分数
            ratingTagsList: null, //评价分类列表
            ratingTageIndex: 0, //评价分类索引
            preventRepeatRequest: false, // 防止多次触发数据请求
            ratingTagName: '', //评论的类型
            loadRatings: false, //加载更多评论是显示加载组件
            foodScroll: null, //食品列表scroll
            showSpecs: false, //控制显示食品规格
            specsIndex: 0, //当前选中的规格索引值
            choosedFoods: null, //当前选中视频数据
            showDeleteTip: false, //多规格商品点击减按钮，弹出提示框
            showMoveDot: [], //控制下落的小圆点显示隐藏
            windowHeight: null, //屏幕的高度
            elLeft: 0, //当前点击加按钮在网页中的绝对top值
            elBottom: 0, //当前点击加按钮在网页中的绝对left值
            ratingScroll: null, //评论页Scroll
            imgBaseUrl,
            goodshow: '//172.16.9.7:8081/goods/goods/selectGoodsByGoodsId',
            item: [],
            messageList: [],
            userId: sessionStorage.getItem("userId"),
            consigner: '',
            price: '',
            pay: 1,
            createPerson: '',
            status: 1,
        }
    },
    created() {
        this.geohash = this.$route.query.geohash;
        this.shopId = this.$route.query.id;
        this.consigner = this.this.$route.query.goodsuser;
        this.INIT_BUYCART();
    },
    mounted() {
        this.getName();
        this.initData();
        this.windowHeight = window.innerHeight;

    },
    components: {
        loading,
        ratingStar,
        buyCart,
        headTop

    },
    methods: {
        ...mapMutations([
            'RECORD_ADDRESS', 'ADD_CART', 'REDUCE_CART', 'INIT_BUYCART', 'CLEAR_CART', 'RECORD_SHOPDETAIL'
        ]),
        //初始化时获取基本数据
        async initData() {
            this.axios.get(this.goodshow, {
                    params: {
                        id: this.shopId
                    }
                })
                .then(res => {
                    console.log(res);
                    this.item = res.data.data.goods;
                    this.consigner = this.item.goodsUser;
                    this.price = this.item.goodsPrice;
                    this.messageList = res.data.data.messageList;
                })
            //隐藏加载动画
            this.hideLoading();
        },
        getName: function () {
            this.axios.get('http://172.16.9.7:8081/getUserById', {
                    params: {
                        userId: this.userId
                    }
                })
                .then(res => {
                    console.log(res);
                    this.userName = res.data;
                    this.createPerson = this.userName;
                })
        },
        deletegoods: function () {
            this.axios({
                method: 'delete',
                url: 'http://172.16.9.7:8081/goods/goods/deleteGoodsByGoodsId',
                params: {
                    goodsId: this.shopId
                }

            }).then(res => {
                console.log(res);
                this.$router.go(-1);
            })
        },
        buygoods: function () {
            this.axios({
                method: 'post',
                url: 'http://172.16.9.7:8081/goods/indent/addIndentbyIdentQuery',
                params: {
                    consigner: this.consigner,
                    client: this.userId,
                    goodsId: this.shopId,
                    price: this.price,
                    pay: this.pay,
                    createPerson: this.createPerson,
                    status: this.status,

                }
            }).then(res => {
                alert('购买成功')
                this.$router.go(-1);
            }).catch(err => {
                alert('请登录账号')
                console.error(err);
            })
        },

        //获取食品列表的高度，存入shopListTop
        getFoodListHeight() {
            const listContainer = this.$refs.menuFoodList;
            if (listContainer) {
                const listArr = Array.from(listContainer.children[0].children);
                listArr.forEach((item, index) => {
                    this.shopListTop[index] = item.offsetTop;
                });
                this.listenScroll(listContainer)
            }
        },
        //当滑动食品列表时，监听其scrollTop值来设置对应的食品列表标题的样式
        listenScroll(element) {
            this.foodScroll = new BScroll(element, {
                probeType: 3,
                deceleration: 0.001,
                bounce: false,
                swipeTime: 2000,
                click: true,
            });

            const wrapperMenu = new BScroll('#wrapper_menu', {
                click: true,
            });

            const wrapMenuHeight = this.$refs.wrapperMenu.clientHeight;
            this.foodScroll.on('scroll', (pos) => {
                if (!this.$refs.wrapperMenu) {
                    return
                }
                this.shopListTop.forEach((item, index) => {
                    if (this.menuIndexChange && Math.abs(Math.round(pos.y)) >= item) {
                        this.menuIndex = index;
                        const menuList = this.$refs.wrapperMenu.querySelectorAll('.activity_menu');
                        const el = menuList[0];
                        wrapperMenu.scrollToElement(el, 800, 0, -(wrapMenuHeight / 2 - 50));
                    }
                })
            })
        },
        //控制活动详情页的显示隐藏
        showActivitiesFun() {
            this.showActivities = !this.showActivities;
        },
        //点击左侧食品列表标题，相应列表移动到最顶层
        chooseMenu(index) {
            this.menuIndex = index;
            //menuIndexChange解决运动时listenScroll依然监听的bug
            this.menuIndexChange = false;
            this.foodScroll.scrollTo(0, -this.shopListTop[index], 400);
            this.foodScroll.on('scrollEnd', () => {
                this.menuIndexChange = true;
            })
        },
        showTitleDetail(index) {
            if (this.TitleDetailIndex == index) {
                this.TitleDetailIndex = null;
            } else {
                this.TitleDetailIndex = index;
            }
        },
        //加入购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
        addToCart(category_id, item_id, food_id, name, price, specs) {
            this.ADD_CART({
                shopid: this.shopId,
                category_id,
                item_id,
                food_id,
                name,
                price,
                specs
            });
        },
        //移出购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
        removeOutCart(category_id, item_id, food_id, name, price, specs) {
            this.REDUCE_CART({
                shopid: this.shopId,
                category_id,
                item_id,
                food_id,
                name,
                price,
                specs
            });
        },
        /**
         * 初始化和shopCart变化时，重新获取购物车改变过的数据，赋值 categoryNum，totalPrice，cartFoodList，整个数据流是自上而下的形式，所有的购物车数据都交给vuex统一管理，包括购物车组件中自身的商品数量，使整个数据流更加清晰
         */
        initCategoryNum() {
            let newArr = [];
            let cartFoodNum = 0;
            this.totalPrice = 0;
            this.cartFoodList = [];
            this.menuList.forEach((item, index) => {
                if (this.shopCart && this.shopCart[item.foods[0].category_id]) {
                    let num = 0;
                    Object.keys(this.shopCart[item.foods[0].category_id]).forEach(itemid => {
                        Object.keys(this.shopCart[item.foods[0].category_id][itemid]).forEach(foodid => {
                            let foodItem = this.shopCart[item.foods[0].category_id][itemid][foodid];
                            num += foodItem.num;
                            if (item.type == 1) {
                                this.totalPrice += foodItem.num * foodItem.price;
                                if (foodItem.num > 0) {
                                    this.cartFoodList[cartFoodNum] = {};
                                    this.cartFoodList[cartFoodNum].category_id = item.foods[0].category_id;
                                    this.cartFoodList[cartFoodNum].item_id = itemid;
                                    this.cartFoodList[cartFoodNum].food_id = foodid;
                                    this.cartFoodList[cartFoodNum].num = foodItem.num;
                                    this.cartFoodList[cartFoodNum].price = foodItem.price;
                                    this.cartFoodList[cartFoodNum].name = foodItem.name;
                                    this.cartFoodList[cartFoodNum].specs = foodItem.specs;
                                    cartFoodNum++;
                                }
                            }
                        })
                    })
                    newArr[index] = num;
                } else {
                    newArr[index] = 0;
                }
            })
            this.totalPrice = this.totalPrice.toFixed(2);
            this.categoryNum = [...newArr];
        },
        //控制购物列表是否显示
        toggleCartList() {
            this.cartFoodList.length ? this.showCartList = !this.showCartList : true;
        },
        //清除购物车
        clearCart() {
            this.toggleCartList();
            this.CLEAR_CART(this.shopId);
        },
        //监听圆点是否进入购物车
        listenInCart() {
            if (!this.receiveInCart) {
                this.receiveInCart = true;
                this.$refs.cartContainer.addEventListener('animationend', () => {
                    this.receiveInCart = false;
                })
                this.$refs.cartContainer.addEventListener('webkitAnimationEnd', () => {
                    this.receiveInCart = false;
                })
            }
        },
        //获取不同类型的评论列表
        async changeTgeIndex(index, name) {
            this.ratingTageIndex = index;
            this.ratingOffset = 0;
            this.ratingTagName = name;
            let res = await getRatingList(this.shopId, this.ratingOffset, name);
            this.ratingList = [...res];
            this.$nextTick(() => {
                this.ratingScroll.refresh();
            })
        },
        //加载更多评论
        async loaderMoreRating() {
            if (this.preventRepeatRequest) {
                return
            }
            this.loadRatings = true;
            this.preventRepeatRequest = true;
            this.ratingOffset += 10;
            let ratingDate = await getRatingList(this.shopId, this.ratingOffset, this.ratingTagName);
            this.ratingList = [...this.ratingList, ...ratingDate];
            this.loadRatings = false;
            if (ratingDate.length >= 10) {
                this.preventRepeatRequest = false;
            }
        },
        //隐藏动画
        hideLoading() {
            this.showLoading = false;
        },
        //显示规格列表
        showChooseList(foods) {
            if (foods) {
                this.choosedFoods = foods;
            }
            this.showSpecs = !this.showSpecs;
            this.specsIndex = 0;
        },
        //记录当前所选规格的索引值
        chooseSpecs(index) {
            this.specsIndex = index;
        },
        //多规格商品加入购物车
        addSpecs(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock) {
            this.ADD_CART({
                shopid: this.shopId,
                category_id,
                item_id,
                food_id,
                name,
                price,
                specs,
                packing_fee,
                sku_id,
                stock
            });
            this.showChooseList();
        },
        //显示提示，无法减去商品
        showReduceTip() {
            this.showDeleteTip = true;
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                clearTimeout(this.timer);
                this.showDeleteTip = false;
            }, 3000);
        },
        //显示下落圆球
        showMoveDotFun(showMoveDot, elLeft, elBottom) {
            this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
            this.elLeft = elLeft;
            this.elBottom = elBottom;
        },
        beforeEnter(el) {
            el.style.transform = `translate3d(0,${37 + this.elBottom - this.windowHeight}px,0)`;
            el.children[0].style.transform = `translate3d(${this.elLeft - 30}px,0,0)`;
            el.children[0].style.opacity = 0;
        },
        afterEnter(el) {
            el.style.transform = `translate3d(0,0,0)`;
            el.children[0].style.transform = `translate3d(0,0,0)`;
            el.style.transition = 'transform .55s cubic-bezier(0.3, -0.25, 0.7, -0.15)';
            el.children[0].style.transition = 'transform .55s linear';
            this.showMoveDot = this.showMoveDot.map(item => false);
            el.children[0].style.opacity = 1;
            el.children[0].addEventListener('transitionend', () => {
                this.listenInCart();
            })
            el.children[0].addEventListener('webkitAnimationEnd', () => {
                this.listenInCart();
            })
        },
        goback() {
            this.$router.go(-1);
        }
    },
    watch: {
        //showLoading变化时说明组件已经获取初始化数据，在下一帧nextTick进行后续操作
        showLoading: function (value) {
            if (!value) {
                this.$nextTick(() => {
                    this.getFoodListHeight();
                    this.initCategoryNum();
                })
            }
        },
        shopCart: function (value) {
            this.initCategoryNum();
        },
        //购物车列表发生变化，没有商铺时，隐藏
        cartFoodList: function (value) {
            if (!value.length) {
                this.showCartList = false;
            }
        },
        //商品、评论切换状态
        changeShowType: function (value) {
            if (value === 'rating') {
                this.$nextTick(() => {
                    this.ratingScroll = new BScroll('#ratingContainer', {
                        probeType: 3,
                        deceleration: 0.003,
                        bounce: false,
                        swipeTime: 2000,
                        click: true,
                    });
                    this.ratingScroll.on('scroll', (pos) => {
                        if (Math.abs(Math.round(pos.y)) >= Math.abs(Math.round(this.ratingScroll.maxScrollY))) {
                            this.loaderMoreRating();
                            this.ratingScroll.refresh();
                        }
                    })
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import 'src/style/mixin';

.text_create {
    text-align: right;
}

.shoplist_container {
    margin-top: 41px;
    width: 328px;
    background-color: #fff;
    margin-bottom: 2rem;
}

.shop_li {
    display: flex;
    border-bottom: 0.025rem solid #f1f1f1;
    padding: 0.7rem 0.4rem;
}

.shop_img {
    @include wh(15rem, 10rem);
    display: block;
    margin-right: 0.4rem;
}

.list_back_li {
    height: 4.85rem;

    .list_back_svg {
        @include wh(100%, 100%)
    }
}

.shop_right {
    flex: auto;

    .shop_detail_header {
        @include fj;
        align-items: center;

        .shop_title {
            margin: auto;
            width: 8.5rem;
            color: #333;
            padding-top: .01rem;
            @include font(0.65rem, 0.65rem, 'PingFangSC-Regular');
            font-weight: 700;
        }

        .premium::before {
            content: '品牌';
            display: inline-block;
            font-size: 0.5rem;
            line-height: .6rem;
            color: #333;
            background-color: #ffd930;
            padding: 0 0.1rem;
            border-radius: 0.1rem;
            margin-right: 0.2rem;
        }

        .shop_detail_ul {
            display: flex;
            transform: scale(.8);
            margin-right: -0.3rem;

            .supports {
                @include sc(0.5rem, #999);
                border: 0.025rem solid #f1f1f1;
                padding: 0 0.04rem;
                border-radius: 0.08rem;
                margin-left: 0.05rem;
            }
        }
    }

    .rating_order_num {
        @include fj(space-between);
        height: 0.6rem;
        margin-top: 0.52rem;

        .rating_order_num_left {
            @include fj(flex-start);

            .rating_section {
                display: flex;

                .rating_num {
                    @include sc(0.4rem, #ff6000);
                    margin: 0 0.2rem;
                }
            }

            .order_section {
                transform: scale(.8);
                margin-left: -0.2rem;
                @include sc(0.4rem, #666);
            }
        }

        .rating_order_num_right {
            display: flex;
            align-items: center;
            transform: scale(.7);
            min-width: 5rem;
            justify-content: flex-end;
            margin-right: -0.8rem;

            .delivery_style {
                font-size: 0.4rem;
                padding: 0.04rem 0.08rem 0;
                border-radius: 0.08rem;
                margin-left: 0.08rem;
                border: 1px;
            }

            .delivery_left {
                color: #fff;
                background-color: $blue;
                border: 0.025rem solid $blue;
            }

            .delivery_right {
                color: $blue;
                border: 0.025rem solid $blue;
            }
        }
    }

    .fee_distance {
        margin-top: 0.52rem;
        @include fj;
        @include sc(0.5rem, #333);

        .fee {
            transform: scale(.9);
            @include sc(0.5rem, #666);
        }

        .distance_time {
            transform: scale(.9);

            span {
                color: #999;
            }

            .order_time {
                color: $blue;
            }

            .segmentation {
                color: #ccc;
            }
        }
    }
}

.loader_more {
    @include font(0.6rem, 3);
    text-align: center;
    color: #999;
}

.empty_data {
    @include sc(0.5rem, #666);
    text-align: center;
    line-height: 2rem;
}

.return_top {
    position: fixed;
    bottom: 3rem;
    right: 1rem;

    .back_top_svg {
        @include wh(2rem, 2rem);
    }
}

.loading-enter-active,
.loading-leave-active {
    transition: opacity 1s
}

.loading-enter,
.loading-leave-active {
    opacity: 0
}
</style>
